<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>申请客户经理</title>
		<link rel="stylesheet" href="${ctx}/assets/css/jquery.mobile-1.4.2.min.css">
		<link rel="stylesheet" href="${ctx}/assets/css/blue.css">
		<link rel="stylesheet" href="${ctx}/assets/css/sco.message.css" />
		<style>
			/* autocomplete */
			div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;z-index:998;}
			div.ac > ul {margin-top:10px;padding:0;}
			div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
			div.ac > ul > li:hover{background:#eee;}
			div.ac > ul > li > div span {padding-left:15px;}
			div.ac > ul > li > div span em {color:red;font-style: normal;}
		</style>
	
		<script src="${ctx}/assets/js/jquery-1.11.0.min.js" type="text/javascript"></script>
		<script src="${ctx}/assets/js/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
		<script src="${ctx}/assets/js/sco.message.js"></script>
		<script src="${ctx}/assets/js/idcardvalid.js" type="text/javascript"></script>
		<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
	</head>
	
		
	<body>
		<div data-role="page" id="menu">
			<div data-role="header">
				<h1>申请客户经理</h1>
			</div><!-- /header -->
			<form id="weixin_form"  action="${ctx}/wx/v1/ConsumerManager/applyPost" method="post">
				<input type="hidden" name="wxuser" value="${wxuser}">
				<input type="hidden" id="lng" name="longitude">
				<input type="hidden" id="lat" name="latitude">
				
			    <div class="ui-field-contain">
			    	
			    	<label style="color:red;">以后该地点将作为代客户下单的默认地点</label>
				    <input type="text" name="place" id="place" placeholder="工作地点定位中...（必填）" value="">
				
				</div>
				
				<div class="ui-field">
				    <input type="text" name="name" id="name" placeholder="姓名（必填）" value="">
				</div>
				<div class="ui-field">
				    <input type="text" name="phone" id="phone" placeholder="电话号码（必填）" value="">
				</div>
				<div class="ui-field">
				    <input type="text" name="idCard" id="idCard" placeholder="身份证（选填）" value="">
				</div>
				<div class="ui-field">
				    <input type="text" name="jobNumber" id="jobNumber" placeholder="工号（选填）" value="">
				</div>
				<div class="ui-field">
				    <textarea cols="40" rows="8" name="personalInfo" id="personalInfo" placeholder="个人说明（选填）"></textarea>
				</div>
				
				<input id="submit_form" type="button" value="提交">
				
		    </form>
		</div>
	</body>
	
</html>
	<script type="text/javascript">
		
		$(function () {
		
			//位置获取
			var city;
			navigator.geolocation.getCurrentPosition(function (position) {
			
			    var coords = position.coords;
			    
			    var loc = coords.latitude+','+coords.longitude;
			
				$("#lat").val(coords.latitude);  
				$("#lng").val(coords.longitude);          
			
			    var param = {ak:'0Bf0928e769210fd88e064cd0cdf84d8',location:loc,output:'json',pois:0,coordtype:'wgs84ll'};
			    
				$.ajax({
					url:"https://api.map.baidu.com/geocoder/v2/",
					type:"GET",
					async:false,
					dataType:'jsonp',
					jsonp:'callback',
					data:param,
					success:function(resp){
						if(null!=resp && ""!=resp && resp.status == 0){
							city=resp.result.addressComponent.city;
							var addressComponent = resp.result.addressComponent;
							var address =addressComponent.district + addressComponent.street +	addressComponent.street_number;				
							$("#place").val(address);
						}
					}
				});
			
			},function(error){
			    switch(error.code) {
			        case error.TIMEOUT:
			        	$.scojs_message("定位超时，请刷新重试。", $.scojs_message.TYPE_ERROR);
			        	$("#place").attr('placeholder','定位失败，请输入地址');
			          	break;
			        case error.POSITION_UNAVAILABLE:
			        	$.scojs_message("未能获取到位置信息，请更换浏览器。", $.scojs_message.TYPE_ERROR);
			            break;
			        case error.PERMISSION_DENIED:
			        	$.scojs_message("请先允许定位。", $.scojs_message.TYPE_ERROR);
			            break;
			        case error.UNKNOWN_ERROR:
			        	$.scojs_message("未知错误。", $.scojs_message.TYPE_ERROR);
			            break;
			    }
			},{enableHighAccuracy:true,timeout:5000,maximumAge:30000});
			
			
			$('#place').AutoComplete({
			    'data': '${ctx}/wx/v1/getAddress',
				ajaxDataType: 'json',
				ajaxParams:function(keyword){
					return {'city':city};
				},
			    'width': 'auto',
			    'async': true,
			    'listStyle': 'custom',
			    'emphasis': false,
			    'matchHandler': function(keyword, data){
			        return true;
			    },
			    'createItemHandler': function(index, data){
			    	return "<span>"+data.name+"</span>";
			    },
			    'afterSelectedHandler': function(data){
			    	$('#place').val(data.name);
			    	$('#lng').val(data.lng);
			    	$('#lat').val(data.lat);
			    }
			}).AutoComplete('show');

			//提交
			$("#submit_form").click(function(){
				if($.trim($("#place").val()).length==0 || !$("#lng").val() || !$("#lat").val()){
					$.scojs_message("请填写工作地点。", $.scojs_message.TYPE_ERROR);
					return;
				}
				
				if($.trim($("#name").val()).length==0){
					$.scojs_message("请填写姓名。", $.scojs_message.TYPE_ERROR);
					return;
				}
				
				var isphone=/^\+?\d{3,13}(\-?(\d{6,8}?))?(\-?(\d{4,8}?))*$/; 
				if (!isphone.test($("#phone").val())){
					$.scojs_message("请填写正确的电话号码。", $.scojs_message.TYPE_ERROR);
					return;
				}
				
				//var idCard=$("#idCard").val();
		    	//var idcardResult=IdCardValidate(idCard);
		    	//if(!idcardResult){
		    		//alert("请填写正确的身份证号");
		    		//return;
		    	//}
				
			    $.mobile.loading("show");
			    $(this).attr("disabled",true);
			    
			    var formObj=$("#weixin_form").serialize();
			    $.post($("#weixin_form").attr("action"),formObj,function(result){
			    	if(result.success){
			    		$.scojs_message("申请资料已提交，请等待审核。", $.scojs_message.TYPE_OK);
			    	}
			    	else{
			    		$.scojs_message(result.message, $.scojs_message.TYPE_ERROR);
			    		$("#submit_form").attr("disabled",false);
			    	}
			    	$.mobile.loading("hide");
			    });
			});
			
		});
	</script>